<template>
  <div class="add-wrap" v-loading="loading">
    <Breadcrumb :titles="titles"></Breadcrumb>
    <div class="body">
      <div class="body-left1">
        <div class="detail-title">
          {{ detail.projectName }}
        </div>
        <div class="detail-item">
          <div class="detail-item-name">项目编号：</div>
          <div class="detail-item-value">
            {{ detail.projectNo }}
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-item-name">项目分类：</div>
          <div class="detail-item-value">
            {{
              getDictLabel(
                detail.projectType,
                projectTypeOptions
              )
            }}
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-item-name">四大结构调整：</div>
          <div class="detail-item-value">
            {{
              getDictLabel(
                detail.projectSdjg,
                projectStructOptions
              )
            }}
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-item-name">细分类型：</div>
          <div class="detail-item-value">
            {{
              getDictLabel(
                detail.xflx,
                projectDivisionOptions
              )
            }}
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-item-name">总投资：</div>
          <div class="detail-item-value">
            {{ detail.ztz || 0 }}
            万元
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-item-name">建设单位：</div>
          <div class="detail-item-value">
            {{ detail.ssdw }}
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-item-name">
            工程负责人及联系电话：
          </div>
          <div class="detail-item-value">
            {{ detail.gcfzr }}
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-item-name">标段名称：</div>
          <div class="detail-item-value">
            {{ detail.sectionName }}
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-item-name">施工单位：</div>
          <div class="detail-item-value">
            {{ detail.sgdw }}
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-item-name">
            项目经理及联系电话：
          </div>
          <div class="detail-item-value">
            {{ detail.xmjl }}
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-item-name">监理单位：</div>
          <div class="detail-item-value">
            {{ detail.jldw }}
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-item-name">
            总监及联系电话：
          </div>
          <div class="detail-item-value">
            {{ detail.zj }}
          </div>
        </div>
        <div class="detail-button">
          <el-button @click="handleDetail" class="submit"
            >查看详情</el-button
          >
        </div>
      </div>
      <div class="body-right">
        <div class="table-wrap">
          <div class="search_header">
            <div></div>
            <div class="search_header_right">
              <el-date-picker
                placeholder="巡查时间"
                v-model="parameter.yearMonth"
                type="month"
                value-format="yyyy-MM"
                @change="search"
              ></el-date-picker>
              <el-select
                placeholder="整改情况"
                v-model="parameter.changeStatus"
                clearable
                @change="search"
              >
                <el-option
                  v-for="item in changeStatusOptions"
                  :key="item.dictValue"
                  :label="item.dictText"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <el-table
            :data="projectList"
            :header-cell-style="{
              background: '#F2F6FB ',
              color: ' #6B767D'
            }"
            :row-class-name="tableRowClassName"
            v-loading="tableLoading"
          >
            <el-table-column
              label="序号"
              align="center"
              show-overflow-tooltip
              width="80"
            >
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column
              label="巡查日期"
              prop="inspectionTime"
              show-overflow-tooltip
            >
              <template slot-scope="scope">{{
                scope.row.inspectionTime.substring(0, 10)
              }}</template>
            </el-table-column>
            <el-table-column
              label="存在问题数"
              prop="problemCount"
              show-overflow-tooltip
            />
            <el-table-column
              label="整改情况"
              prop="changeStatusDictText"
              show-overflow-tooltip
            />
            <el-table-column
              label="操作"
              show-overflow-tooltip
              width="80"
            >
              <template slot-scope="scope">
                <el-button
                  @click="viewProject(scope.row)"
                  type="text"
                  style="color: #00baff; font-weight: 400"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="table-pagination" v-if="total">
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="parameter.pageSize"
              @current-change="pageChange"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb'
import { queryProjectDetail } from '@/api/projectMessage'
import {} from '@/api/patrolProject'
import { queryOptions } from '@/api/dict'
import { getDictLabel } from '@/utils/dict'
import { queryProjectList } from '@/api/patrolRecord'
export default {
  props: {
    pkid: String,
    title: String,
    projectId: String,
    projectBaseId: String
  },
  components: {
    Breadcrumb
  },
  data() {
    return {
      detail: {},
      loading: false,
      tableLoading: false,
      currentPicture: 0,
      projectTypeOptions: [],
      projectStructOptions: [],
      projectDivisionOptions: [],
      projectCapitalOptions: [],
      changeStatusOptions: [],

      projectList: [],
      total: '',
      parameter: {
        yearMonth: '',
        changeStatus: '',
        pageIndex: 1,
        pageSize: 10
      }
    }
  },
  computed: {
    titles() {
      return [this.title]
    }
  },
  mounted() {
    this.getAllOptions()
    this.getProjectDetail()
    this.getList()
  },
  methods: {
    getDictLabel,
    handleClickPicture(index) {
      this.currentPicture = index
    },
    // 所有选项
    getAllOptions() {
      queryOptions(
        'projectType,projectSdjg,xflx,zjly,zhjs_zgzt'
      ).then((res) => {
        if (res.success) {
          // 项目分类
          this.projectTypeOptions = res.data.filter(
            (i) => i.dictCode === 'projectType'
          )[0].resourceDictItems

          // 四大结构调整
          this.projectStructOptions = res.data.filter(
            (i) => i.dictCode === 'projectSdjg'
          )[0].resourceDictItems

          // 细分类型
          this.projectDivisionOptions = res.data.filter(
            (i) => i.dictCode === 'xflx'
          )[0].resourceDictItems

          // 资金来源
          this.projectCapitalOptions = res.data.filter(
            (i) => i.dictCode === 'zjly'
          )[0].resourceDictItems

          // 整改情况
          this.changeStatusOptions = res.data.filter(
            (i) => i.dictCode === 'zhjs_zgzt'
          )[0].resourceDictItems
        }
      })
    },
    // 获取详情
    getProjectDetail() {
      queryProjectDetail(this.projectBaseId).then((res) => {
        if (res.success) {
          let sectionInfo = res.data.sectionInfoList.filter(
            (item) => {
              return item.pkid === this.projectId
            }
          )
          this.detail = {
            projectNo: res.data.project.projectNo,
            projectName: res.data.project.projectName,
            projectType: res.data.project.projectType,
            projectSdjg: res.data.project.projectSdjg,
            xflx: res.data.project.xflx,
            ztz: res.data.project.ztz,
            ssdw: res.data.project.ssdw,
            gcfzr: res.data.project.gcfzr,
            sectionName: sectionInfo[0].sectionName,
            sgdw: sectionInfo[0].buildUnit,
            xmjl: sectionInfo[0].buildLeader,
            jldw: sectionInfo[0].supervisorUnit,
            zj: sectionInfo[0].supervisor
          }
        }
      })
    },
    // 查看详情
    handleDetail() {
      this.$router.push({
        path: '/wisdomConstruction/messageManagement/form',
        query: {
          pkid: this.projectBaseId,
          isView: true,
          isCheck: false,
          title: '查看'
        }
      })
    },
    // 项目查看
    viewProject(row) {
      this.$router.push({
        path: '/wisdomConstruction/projectPatrolManagement/patrolRecord/add',
        query: {
          pkid: row.pkid,
          title: '查看',
          isEdit: true,
          isDetail: true,
          problemCount: row.problemCount
        }
      })
    },
    // 获取用户列表
    getList() {
      this.tableLoading = true
      const params = {
        ...this.parameter,
        projectId: this.projectId
      }
      queryProjectList(params).then((res) => {
        if (res.success) {
          this.total = res.data.count
          this.projectList = res.data.list
        }
        this.tableLoading = false
      })
    },
    search() {
      this.parameter.pageIndex = 1
      this.getList()
    },
    // 表格高亮
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'light'
      } else {
        return ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// @import '~@/assets/css/form.scss';
@import '~@/assets/css/table.scss';
.add-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  .body {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0;
    box-shadow: none;
    ::v-deep .el-breadcrumb__inner {
      color: #606266 !important;
      font-weight: 400 !important;
    }
    &-left1 {
      min-width: 360px;
      height: 100%;
      border-right: 1px solid #f1f1f1;
      box-sizing: border-box;
      padding: 17px 28px;
      overflow-y: auto;
      .detail-title {
        font-size: 16px;
        font-weight: 500;
        color: #4c565c;
        width: 100%;
        margin-bottom: 16px;
      }
      .detail-item {
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        margin-bottom: 15px;
        &-name {
          min-width: 70px;
          font-size: 14px;
          font-weight: 400;
          color: #000000;
        }
        &-value {
          font-size: 14px;
          font-weight: 400;
          color: #4c565c;
        }
      }
      .detail-button {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .submit {
          width: 104px;
          height: 34px;
          color: white;
          background: #497fa3;
          border: 1px solid #497fa3;
          border-radius: 2px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    &-right {
      width: calc(100% - 360px);
      height: 100%;
      box-sizing: border-box;
      padding: 10px;
      display: flex;
      flex-direction: column;
      &-imgs {
        display: flex;
        flex-wrap: wrap;
        .el-image {
          width: 280px;
          height: 200px;
          margin-right: 10px;
          margin-bottom: 10px;
        }
      }
    }
    .table-wrap {
      padding: 0;
    }
  }
}
</style>
